import '@/App.css';
import { testFunction } from '@/utils/test';
import { Button } from 'antd';

const Btn = ({ count, addCount }) => {
  useEffect(() => {
    console.log('count changed', count);
  }, [count]);

  return (
    <>
      <div>
        <h1>count: {count} </h1>
        <Button onClick={addCount} type="primary">
          Primary Button
        </Button>
      </div>
    </>
  );
};

function App() {
  const [count, setCount] = useState(0);
  const [count2, setCount2] = useState(0);

  useEffect(() => {
    testFunction();
  }, []);

  const addCount = () => {
    setCount((e) => e + 1);
    setCount2((e) => e + 2);
  };

  return (
    <>
      <h1 className="text-3xl font-bold underline">Hello world!</h1>
      <Btn count={count} addCount={addCount} />
      <Btn count={count2} addCount={addCount} />
    </>
  );
}

export default App;
